<template>
    <div class="card">
    <el-row :gutter="10" justify="start">
        <el-col :span="4">
            <label id="scid">收藏id:</label>
            <el-input style="width: 120px" name="scid" v-model="shoucang.scid" placeholder="请输入收藏id"></el-input>
        </el-col>
        <el-col :span="4">
            <label id="yhid">用户id:</label>
            <el-input style="width: 120px" name="yhid" v-model="shoucang.yhid" placeholder="请输入用户id"></el-input>
        </el-col>
        <el-col :span="4">
            <label id="sjid">商家id:</label>
            <el-input style="width: 120px" name="sjid" v-model="shoucang.sjid" placeholder="请输入商家id"></el-input>
        </el-col>
        <el-col :span="2">
            <el-button type="info" @click="doList">查询</el-button>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
        <el-col :span="2">
            <el-button type="warning" style="color: black;font-size: 12px;position: absolute;right: 100px; " @click="showAddDialog">新增</el-button>
        </el-col>
    </el-row>
    <el-row justify="start">
        <el-table stripe
                  :data="shoucangList"
                  style="width: 95%;margin-left: 2%;margin-top: 20px "
                  header-row-style="color:black"
                  @sort-change="handleSortChange"
        >
            <el-table-column prop="scid" sortable="custom" label="收藏id"></el-table-column>
            <el-table-column prop="yhid" sortable="custom" label="用户id"></el-table-column>
            <el-table-column prop="sjid" sortable="custom" label="商家id"></el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button type="info" size="small" @click="showDetailPage(scope.row)">详情</el-button>
                    <el-button type="primary" size="small" @click="showUpdateDialog(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click="doDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

        <el-row>
            <el-pagination
                style="margin: 30px auto"
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5,10]"
                :size="size"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </el-row>
    </div>

  <!-- 新增 dialog-->
    <el-dialog v-model="addDialogVisible" title="新增收藏" width="40%" top="2vh" destroy-on-close>
        <add-page
                @flushPage="doFlushPage"
                @closeDialog="addDialogVisible = false">
        </add-page>
    </el-dialog>

  <!-- 更新 dialog-->
    <el-dialog v-model="updateDialogVisible" title="更新收藏信息" width="40%" top="2vh" destroy-on-close>
        <update-page ref="updatePageRef"
                     @flushPage="doFlushPage"
                     @closeDialog="updateDialogVisible = false">
        </update-page>
    </el-dialog>

  <!-- 详情 页面 -->
    <detail-page ref="detailPageRef"></detail-page>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage, FormInstance} from "element-plus";
import AddPage from './AddShoucang.vue'
import UpdatePage from './UpdateShoucang.vue'
import DetailPage from './DetailShoucang.vue'

const shoucang = ref({
    scid: '',
    yhid: '',
    sjid: ''
})
const shoucangList = ref([])
const formRef = ref<FormInstance>();

onMounted(() =>{
    doList();
})

const doList = async () => {
    shoucangList.value = [];
    const {data} = await axios.get('/api/shoucang',{
        params: {
            ...shoucang.value,
            currentPage: currentPage.value,
            pageSize: pageSize.value,
            sortField: sortField.value,
            sortOrder: sortOrder.value
        }
    })
    if(data.code === 200){
        shoucangList.value = data.data.records;
        total.value = data.data.total;
        ElMessage.success(data.message);
    }else{
        ElMessage.error(data.message);
    }
}
const reset = () => {
    shoucang.value = {
        scid: '',
        yhid: '',
        sjid: ''
    }
    doList();
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const doFlushPage = ()=>{
    resetForm(formRef.value);
    doList();
}

// 新增 dialog
const addDialogVisible = ref(false);
const showAddDialog = ()=>{
    addDialogVisible.value = true;
}

// 更新 dialog
const updateDialogVisible = ref(false);
const updatePageRef = ref(); // 组件引用
const showUpdateDialog = (obj)=>{
    updateDialogVisible.value = true;
    nextTick(()=>{
        updatePageRef.value.handleUpdateData(obj);
    })
}

// 详显 dialog
const detailPageRef = ref();
const showDetailPage = (obj)=>{
    detailPageRef.value.handleDetailData(obj);
}

//删除
const doDelete = async (obj) => {
    const {data} = await axios.delete('/api/shoucang/'+obj.scid,)
    if(data.code === 200){
        ElMessage.success(data.message);
        await doList();
    }else{
        ElMessage.error(data.message);
    }
}

//分页
const currentPage = ref(1);
const pageSize = ref(5);
const size = ref<'small' | 'default'>('default');
const total = ref(0);
const disabled = ref(false);
const background = ref(true);

const handleSizeChange = (val: number) => {
    pageSize.value = val;
    doList();
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    doList();
}

//排序
const sortField = ref('');
const sortOrder = ref('');

const handleSortChange = (sort: { prop: string; order: 'ascending' | 'descending' | null }) => {
    if (sort.prop && sort.order) {
        sortField.value = sort.prop;
        // 将 Element Plus 的排序顺序转换为后端能识别的格式
        sortOrder.value = sort.order === 'ascending' ? 'asc' : 'desc';
    } else {
        sortField.value = '';
        sortOrder.value = '';
    }
    doList(); // 重新请求数据
}

</script>

<style scoped>
.card{
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0, .12);
}
</style>